<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-image: url(img/bgi.jpg);			
			}
			/*上*/
			.triangle1 {
				width: 0;
				height: 0;
				position: absolute;
				top: 50px;
				left: 15%;
				border-right: 150px solid transparent;
				border-left: 150px solid transparent;
				border-bottom: 150px solid red;
			}
			/*下*/
			.triangle2 {
				width: 0;
				height: 0;
				position: absolute;
				top: 50px;
				left: 30%;
				border-right: 150px solid transparent;
				border-left: 150px solid transparent;
				border-top: 150px solid blue;
			}
			/*左*/
			.triangle3 {
				width: 0;
				height: 0;
				position: absolute;
				top: 50px;
				left: 70%;
				border-top: 150px solid transparent;
				border-bottom: 150px solid transparent;
				border-right: 150px solid green;
			}
			/*右*/
			.triangle4 {
				width: 0;
				height: 0;
				position: absolute;
				top: 50px;
				left: 85%;
				border-top: 150px solid transparent;
				border-bottom: 150px solid transparent;
				border-left: 150px solid orange;
			}
		</style>
	</head>

	<body>
		<div class="triangle1"></div>
		<div class="triangle2"></div>
		<div class="triangle3"></div>
		<div class="triangle4"></div>

	</body>

</html>